import React, { useState, useRef } from 'react'
import { Space, Table, Button } from 'antd'
import { useColumns, useFile } from './hooks'

const Com = () => {
    const fileRef = useRef()
    const { clickHandle, fileChangeFn } = useFile(fileRef)
    const [ prolist, setProlist ] = useState([])
    const columns = useColumns()

    const fileChangeHandle = () => {
        fileChangeFn().then( res => {
            setProlist(res)
        })
    }
    return (
        <div>
            <h1>Import</h1>
            <Space direction="vertical" style={{ width: '100%', height: 700 }}>
                <Button onClick={clickHandle}>导入数据</Button>
                <input type="file" hidden ref={fileRef} onChange={fileChangeHandle} />
                <Table dataSource={prolist} columns = { columns } rowKey="proname" style={{ width: '100%', height: 600}}></Table>
            </Space>
        </div>
    )
}

export default Com